<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <title>jQuery</title>
</head>
<body>
    <ul>  <li>list item 1</li>  <li>list item 2</li>  <li class="third-item">list item 3</li>  <li>list item 4</li>  <li>list item 5</li></ul>
</body>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    // $("li").add("p").css("background-color","red");
    // $("li").add(document.getElementsByTagName("p")[0]).css("background-color","red");
    $("li.third-item").nextAll().addBack().css("background-color","red");
</script>
</html>

<!-- <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>add demo</title>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <p>Hello</p><span>Hello Again</span> <script>$( "span" ).add( "p" ).css( "background", "yellow" );</script> </body></html>
 -->

<!-- <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>add demo</title>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <p>Hello</p> <script>$( "p" ).clone().add( "<span>Again</span>" ).add("<p>hello2</p>").appendTo( document.body );</script> </body></html>
 -->



















